//Style the file inputs
(function($) {
	$.fn.filestyle = function(options) {
				
		/* TODO: This should not override CSS. */
		var settings = {
			width : 210
		};
				
		if(options) {
			$.extend(settings, options);
		};
						
		return this.each(function() {
			
			var self = this;
			var wrapper = $("<span>")
							.css({
								"width": settings.imagewidth + "px",
								"height": settings.imageheight + "px",
								"background": "url(" + settings.image + ") no-repeat "
							});
							
			var filename = $('<input class="file" value="Der er ikke valgt nogen fil">')
							 .addClass($(self).attr("class"))
							 .css({
								 "width": settings.width + "px"
							 });

			$(self).before(filename);
			$(self).wrap(wrapper);

			$(self).css({
						"position": "relative",
						"height": settings.imageheight + "px",
						"width": settings.width + "px",
						"display": "inline",
						"cursor": "pointer",
						"opacity": "0.0"
					});

			if ($.browser.mozilla) {
				if (/Win/.test(navigator.platform)) {
					$(self).css("margin-left", "-260px");                    
				} else {
					$(self).css("margin-left", "-168px");                    
				};
			} else {
				$(self).css("margin-left", settings.imagewidth - settings.width + "px");                
			};

			$(self).bind("change", function() {
				filename.val($(self).val());
			});
	  
		});
		

	};
	
})(jQuery);